
<template>
	<view class="content" v-if="data">
		<u-navbar :autoBack="true" bgColor="transparent" leftIconColor="#fff" :title="$t('yuce.fabuyuce')" :titleStyle="{color:'#fff'}"></u-navbar>
		<view class="header">
			<view class="h-center">
				<view class="status_bar"></view>
				<view style="height: 44px;"></view>
				<view class="h-c-t">
					<view>{{ $u.timeFormat(data.match.gtime, 'yyyy/mm/dd/ hh:MM') }} </view>
					<view style="margin-left: 10px;"> {{data.match.league}}</view>
				</view>
				<view class="h-c-c">
					<view class="cc-l">
						<image class="image" :src="data.match.homeLogo"></image>
						<view>{{data.match.homeName}}</view>
					</view>
					<view class="cc-c">VS</view>
					<view class="cc-r">
						<image class="image" :src="data.match.awayLogo"></image>
						<view>{{data.match.awayName}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="c-center">
			<view class="cch">
				<view class="s-item" :class="{active:form.playType==1}" @click="clickBtn(1)">{{$t('yuce.rangqiu')}}</view>
				<view class="s-item" :class="{active:form.playType==-1}" @click="clickBtn(-1)">{{$t('yuce.daxiao')}}</view>
				<view class="s-item" :class="{active:form.playType==2,disabled:data.odds.betY.odds.length==0}" @click="clickBtn(2)">1 X 2</view>
			</view>
			<view class="cc2">
				<!-- 让球 -->
				<template v-if="form.playType==1">
					<view class="cc2-l" :class="{active:form.choseSide==1}" @click="clickchoseSide(1)">
						<view class="l-tt">{{$t('yuce.zhusheng')}}</view>
						<view v-if="data.odds.y&&data.odds.y.odds">{{data.odds.y.odds[0]}}</view>
					</view>
					<view class="cc2-c" style="font-size: 18px;" v-if="data.odds.y&&data.odds.y.odds">{{data.odds.y.odds[1]}}</view>
					<view class="cc2-r" :class="{active:form.choseSide==-1}" @click="clickchoseSide(-1)">
						<view>{{$t('yuce.kesheng')}}</view>
						<view  v-if="data.odds.y&&data.odds.y.odds">{{data.odds.y.odds[2]}}</view>
					</view>
				</template>
				<!-- 大小 -->
				<template v-if="form.playType==-1">
					<view class="cc2-l" :class="{active:form.choseSide==1}" @click="clickchoseSide(1)">
						<view class="l-tt">{{$t('yuce.daqiu')}}</view>
						<view v-if="data.odds.d&&data.odds.d.odds">{{data.odds.d.odds[0]}}</view>
					</view>
					<view class="cc2-c" style="font-size: 18px;" v-if="data.odds.d&&data.odds.d.odds">{{data.odds.d.odds[1]}}</view>
					<view class="cc2-r" :class="{active:form.choseSide==-1}" @click="clickchoseSide(-1)">
						<view>{{$t('yuce.xiaoqiu')}}</view>
						<view v-if="data.odds.d&&data.odds.d.odds">{{data.odds.d.odds[2]}}</view>
					</view>
				</template>
				<!-- 1 X 2 竞彩胜平负 -->
				<template v-if="form.playType==2">
					<view class="cc2-l" :class="{active:form.choseSide==1}" @click="clickchoseSide(1)">
						<view class="l-tt">{{$t('yuce.zhusheng')}}</view>
						<view v-if="data.odds&&data.odds.betY&&data.odds.betY.odds">{{data.odds.betY.odds[1]}}</view>
					</view>
					<view class="cc2-r" :class="{active:form.choseSide===0}" @click="clickchoseSide(0)">
						<view>{{$t('yuce.pingju')}}</view>
						<view v-if="data.odds&&data.odds.betY&&data.odds.betY.odds">{{data.odds.betY.odds[2]}}</view>
					</view>
					<view class="cc2-r" :class="{active:form.choseSide==-1}" @click="clickchoseSide(-1)">
						<view>{{$t('yuce.kesheng')}}</view>
						<view v-if="data.odds&&data.odds.betY&&data.odds.betY.odds">{{data.odds.betY.odds[3]}}</view>
					</view>
				</template>
			</view>
			<view class="cc3">
				<view class="title">{{$t('yuce.biaotineirong')}}</view>
				<u--input border="surround" v-model="form.title" style="background-color: #fff;" :disabled="disabled"></u--input>
			</view>
			<view class="cc3">
				<view class="title">{{$t('yuce.chakanfeiyong')}}</view>
				<view class="btns">
					<template v-for="(item,index) in data.money">
						<view style="width: 80rpx;text-align: center;" class="ii" :class="{active:form.money===item.ballcoin,disable:item.isShow==0}" @click="clickMoney(item.ballcoin,item)">{{item.showText}}</view>
					</template>
				</view>
			</view>
			<view class="cc3">
				<view class="title">{{$t('yuce.daojuxiaofei')}}</view>
				<view class="btns" style="justify-content: start;">
					<template v-for="(item,index) in data.props">
						<view class="ii" style="margin-right: 20rpx;" :class="{active:form.propId==item.id,disable:item.isShow==0}" @click="clickProps(item.id,item)">{{item.showText}}</view>
					</template>
				</view>
				<view style="margin-top: 10px;">{{form.explain}}</view>
			</view>
			<view class="cc3">
				<view class="title">{{$t('yuce.yuceliyou')}}</view>
				<u--textarea height="50" border="surround" v-model="form.analysisReason" style="background-color: #fff;" :disabled="disabled"></u--textarea>
			</view>
			<!-- <view class="cc4">
				暂无优惠券可用
				<u-icon name="arrow-right" color="#fff"></u-icon>
			</view> -->
			<view class="submit">
				<view class="text">{{matchType==1? $t('yuce.jrzqsy'): $t('yuce.jrlqsy') }}
				<text style="margin: 0 5px;">{{data.remainNum}}</text>
				{{$t('yuce.ci')}}</view>
				<u-button type="error" :text="$t('yuce.querentijiao')" :disabled="disabled" @click="release"></u-button>
			</view>
		</view>
		
		
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api']),
		},
		data() {
			return {
				data:'',
				matchId:'',//赛事id
				matchType:1,//赛事类型 1足球 2篮球
				disabled:false,//表单是否禁止选择
				form:{
					playType:1,//玩法  让球：1，大小：-1  竞彩胜平负/竞彩让分2，竞彩让球/竞彩大小分-2
					choseSide:'',//选择 主胜/大球：1，客胜/小球：-1 ;竞彩：主胜1，平局0，客胜-1
					title:'',//标题
					money:'',//金额
					propId:'',//道具id
					analysisReason:'',//分析理由
					couponId:''//优惠券id
				},
				explain:'',//道具说明
				
			}
		},
		onLoad(op) {
			this.matchId = op.matchId
			this.matchType = op.type
			//推荐赛事数据
			this.matchInfo()
			this.form={
				playType:1,//玩法  让球：1，大小：-1  竞彩胜平负/竞彩让分2，竞彩让球/竞彩大小分-2
				choseSide:'',//选择 主胜/大球：1，客胜/小球：-1 ;竞彩：主胜1，平局0，客胜-1
				title:'',//标题
				money:'',//金额
				propId:'',//道具id
				analysisReason:'',//分析理由
				couponId:''//优惠券id
			}
		},
		methods:{
			//点击道具
			clickProps(index,row){
				if(this.disabled==true){
					return
				}
				if(row.isShow==0){
					return
				}
				if(this.form.propId==index){
					this.form.propId = ''
					this.form.explain = ''
				}else{
					this.form.propId = index
					this.form.explain = row.explain
				}
				
			},
			//金额
			clickMoney(index,row){
				if(this.disabled==true){
					return
				}
				if(row.isShow==0){
					return
				}
				this.form.money = index
				
			},
			//选择
			clickchoseSide(index){
				if(this.disabled==true){
					return
				}
				
				this.form.choseSide = index
				if(this.form.playType==1){//让球
					if(index==1){//主队
						this.form.analysisReason=this.$t('yuce.zhusheng') + ' '+ this.data.odds.y.odds[1]+' ('+this.data.odds.y.odds[0]+')'
					}else{
						this.form.analysisReason=this.$t('yuce.kesheng') +' '+  this.data.odds.y.odds[1]+' ('+this.data.odds.y.odds[2]+')'
					}
				}else if(this.form.playType==-1){ // 大小
					if(index==1){//主队
						this.form.analysisReason=this.$t('yuce.daqiu') +' '+  this.data.odds.d.odds[1]+' ('+this.data.odds.d.odds[0]+')'
					}else{
						this.form.analysisReason=this.$t('yuce.xiaoqiu') +' '+  this.data.odds.d.odds[1]+' ('+this.data.odds.d.odds[2]+')'
					}
				}else if(this.form.playType==2){ // 1 X 2
					if(index==1){//主队
						this.form.analysisReason=this.$t('yuce.zhusheng') + ' '+ this.data.odds.betY.odds[0]+' ('+this.data.odds.betY.odds[1]+')'
					}else if(index==0){// 平局
						this.form.analysisReason=this.$t('yuce.pingju') + ' '+ this.data.odds.betY.odds[0]+' ('+this.data.odds.betY.odds[2]+')'
					}else if(index==-1){// 客胜
						this.form.analysisReason=this.$t('yuce.kesheng') + ' '+ this.data.odds.betY.odds[0]+' ('+this.data.odds.betY.odds[3]+')'
					}
				}
				
			},
			//玩法 
			clickBtn(index){
				if(index==2&&this.data.odds.betY.odds.length==0){
					return
				}
				this.form={
					playType:1,//玩法  让球：1，大小：-1  竞彩胜平负/竞彩让分2，竞彩让球/竞彩大小分-2
					choseSide:'',//选择 主胜/大球：1，客胜/小球：-1 ;竞彩：主胜1，平局0，客胜-1
					title:'',//标题
					money:'',//金额
					propId:'',//道具id
					analysisReason:'',//分析理由
				}
				this.form.playType=index
				// 回显表单
				this.echoeFn()
			},
			//推荐赛事数据
			matchInfo(){
				let params={
					matchId:this.matchId,//赛事id
					matchType:this.matchType//赛事类型 1足球 2篮球
				}
				uni.$u.http.post(this.api.api_v1_recommend_matchInfo, params).then(res => {
					if(res.code==200&&res.data){
						this.data = res.data
						// 回显表单
						this.echoeFn()
					}
				})
			},
			// 回显表单
			echoeFn(){
				// 1让球 -1大小 2 1x2
				if(this.form.playType==1){
					if(this.data.odds.y.recommend){
						this.form={
							playType:1,
							...this.data.odds.y.recommend
						}
						this.disabled=true
					}else{
						this.disabled=false
					}
					
				}else if(this.form.playType==-1){
					if(this.data.odds.d.recommend){
						this.form={
							playType:-1,
							...this.data.odds.d.recommend
						}
						this.disabled=true
					}else{
						this.disabled=false
					}
				}else if(this.form.playType==2){
					if(this.data.odds.betY.recommend){
						this.form={
							playType:2,
							...this.data.odds.betY.recommend
						}
						this.disabled=true
					}else{
						this.disabled=false
					}
				}
			},
			
			//发布推荐
			release(){
				if(this.disabled==true){
					return
				}
				// // 1让球 -1大小 2 1x2
				// if(this.form.playType==1&&){
					
				// }else if(this.form.playType==-1){
					
				// }else if(this.form.playType==2){
				// }
				uni.showModal({
					title: this.$t('yuce.tishi'),
					content:  this.$t('yuce.qrytjm'),
					showCancel: true,
					success: res => {
						if(res.confirm){
							let params={
								matchId:this.matchId,//赛事id
								matchType:this.matchType,//赛事类型 1足球 2篮球
								...this.form
							}
							uni.$u.http.post(this.api.api_v1_recommend_release, params).then(res => {
								if(res.code==200){
									uni.navigateBack({
										delta: 1,
										success() {
											setTimeout(()=>{
												uni.showToast({
													title: this.$t('yuce.tjcg')
												});
											},1000)
										}
									});
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
				
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.content{
		color: #fff;font-size: 12px;
		.c-center{
			width: 100%;box-sizing: border-box;position: relative;top: -10px;
			.cch{
				display: flex;justify-content: space-around;padding:0 10px;border-radius: 10px 10px 0 0;background-color: #242448;padding: 10px;
				.active{
					color: #c72d5e;
				}
				.disabled{
					color: #909090;
				}
			}
			.cc2{
				padding:0 10px;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;margin-top: 10px;
				.cc2-l,.cc2-r{
					display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #242448;
					width: 180rpx;padding: 10px;border-radius: 10px;font-size:16px;
					
				}
				.active{
					background-color: #c72d5e;
				}
			}
			.cc3{
				padding:0 10px;box-sizing: border-box;margin-top: 10px;
				.title{
					margin-bottom: 10px;font-size: 16px;
				}
				.btns{
					display: flex;justify-content: space-between;
					.ii{
						padding: 8px 20px;background-color: #242448;
						border-radius: 5px;
					}
					.active{
						background-color: #c72d5e;
					}
					.disable{
						background-color: #a7a7a7;
					}
				}
			}
			.cc4{
				display: flex;justify-content: space-between;padding: 10px;box-sizing: border-box;
			}
			.submit{
				text-align: center;padding: 0 10px;box-sizing: border-box;margin-top: 10px;
				.text{
					margin-bottom: 10px;
				}
			}
		}
		.header{
			width: 100%;height:420rpx;background-image: url(../../static/image/yuce/bg.jpg);background-size: 100% 100%;
			.h-center{
				width: 100%;height: 100%;background-color: rgba(37,89,181,.8);
				.h-c-t{
					display: flex;justify-content: center;
				}
				.h-c-c{
					display: flex;justify-content: space-around;align-items: center;padding: 10px 20px;
					.cc-l,.cc-r{
						display: flex;flex-direction: column;justify-content: center;align-items: center;
						.image{
							width: 50px;height: 50px;margin-bottom: 5px;
						}
					}
					.cc-c{
						font-size: 26px;
					}
				}
			}
		}
	}
</style>
